<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue.min.js"></script>
</head>
<body>
    <div id="app"> 
        <input type="button" value="浪起来" @click = "lang">
        <input type="button" value="低调" @click = "stop">
        <h4>{{ msg }}</h4>
    </div>
    
    <script>
        //注意，在vm实例中，如果想要获取data上的数据或者想要调用methods中的方法，必须通过this.数据属性名 或 this.方法名来进行访问
        //这里的this,就表示我们new出来的vm实例对象
        var vm = new Vue({
            el:"#app",
            data:{
                msg:'猥琐发育，别浪~~!',
                intervalId: null //在data上定义 定时器id
            },
            methods:{
                lang() {
                    if(this.intervalId != null) return  //判断定时器状态是否开启，这步操作是防止多次点击开始时按钮失效
                    this.intervalId = setInterval(() => {
                    console.log(this.msg)
                    //获取到头的第一个字符
                    var start = this.msg.substring(0,1)
                    //console.log(start)
                    //获取到后面的所有字符
                    var end = this.msg.substring(1)
                    //console.log(end)
                    //重新拼接
                    this.msg = end + start
                   }, 400);
                },
                stop() {  //停止计时器
                    clearInterval(this.intervalId)
                    //每当清除了定时器之后，就要把intervalId还原设置为null
                    this.intervalId = null
                }
            }
        })

        //分析
        //1. 给浪起来按钮绑定一个事件v-on或者@
        //2.在按钮的事件处理函数中，写相关的业务逻辑代码，拿到msg字符串，然后调用字符串的substring来进行字符串的
        //截取操作，把第一个截取的字符截取出来，放到最后的位置即可
        //3.为了实现按钮点击连续截取的事件，需要将2中的代码放到定时器中去执行
    </script>
</body>
</html>